<template>
    <el-drawer
        
        v-model="drawerOpen"
        :title="drawerTitle"
        :direction="props.direction"
        :before-close="handleClose"
        :size="size"
        :with-header="props.isShowTitle"
    >
        
        <slot></slot>
        
        <template v-if="props.isEditOption" #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">{{ confirmText }}</el-button>
            </div>
        </template>
    </el-drawer>


</template>

<script lang='ts' setup>
import feedback from "@/utils/feedback";


interface DrawerProps {
    direction?: "rtl" | 'ltr' | "ttb" | "btt" | any
    size?: any
    title?: string
    isShowTitle?: boolean
    isEditOption?: boolean
    confirmText?: string
}

const props = withDefaults(defineProps<DrawerProps>(), {
    direction: 'rtl',
    size: '30%',
    title: '这是一个弹窗请输入标题',
    isShowTitle: true,
    isEditOption: false,
    confirmText: '确定'
})


const drawerOpen = ref(false)

/**
 * 标题
 */
const drawerTitle = computed(() => {
    return props.title
})


/**
 * 打开抽屉
 */
const emit = defineEmits(['success', 'close'])


function open() {
    if (drawerOpen.value !== true) {
        drawerOpen.value = true
    }
}

/**
 * 关闭抽屉
 *
 * @param done
 */
function handleClose(done: () => void) {
    
    if (props.isEditOption) {
        feedback.confirm("编辑情况下取消当前页面，信息将不会保存").then(() => {
            done()
            emit("close")
        })
    } else {
        emit("close")
        done()
    }
}

/**
 * 取消操作
 */
function cancelClick() {
    drawerOpen.value = false
    emit("close")
    
}

/**
 * 确认提交
 */
function confirmClick() {
    emit("success")
    
}

defineExpose({
    open
    
})

</script>
